<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>腾讯地图示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            height: 100%;
            width: 100%;
        }
        .price-label {
            background-color: white;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        .price {
            color: #f34336;
            font-size: 16px;
        }
        .ultra-tag {
            display: inline-block;
            padding: 2px 5px;
            background-color: #5560ef;
            color: white;
            border-radius: 3px;
            font-size: 12px;
            margin-top: 3px;
        }
        .fast-tag {
            display: inline-block;
            padding: 2px 5px;
            background-color: #ff8c00;
            color: white;
            border-radius: 3px;
            font-size: 12px;
            margin-top: 3px;
        }
        .station-info {
            font-size: 12px;
            margin-top: 3px;
            padding-left: 5px;
            padding-right: 5px;
            display: flex;
            align-items: center;
            background: rgba(85,96,239, 0.2);
        }
        
        /* 定位按钮样式 */
        #location-button {
            position: fixed;
            bottom: 150px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 1000;
        }
        
        #location-button img {
            width: 24px;
            height: 24px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <!-- 添加定位按钮 -->
    <div id="location-button">
        <img src="./img/location.png" alt="定位" onerror="this.src='./img/weizhi.png'; this.style.width='20px'; this.style.height='20px';">
    </div>

    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=DGHBZ-5UUL3-C4I3F-OTYMB-43ODE-KWFAW"></script>
    <script charset="utf-8" src="./js/uni.webview.1.5.6.js"></script>
    <script>
		
		var map = null;
		
		var currentUserLocation = null; // 存储当前用户位置
		
		document.addEventListener('UniAppJSBridgeReady', function() {
		    // 向App发送初始化事件
		    uni.postMessage({
		        data: {
		            type: 'init',
		            message: '成功'
		        }
		    })
		    
		    // 初始化地图 - default center will be updated when location is available
		    var center = new TMap.LatLng(39.90469, 116.40717);
            map = new TMap.Map('container', {
                center: center,
                zoom: 16,
                viewMode: '2D'
            });
            
            // 添加定位按钮点击事件
            document.getElementById('location-button').addEventListener('click', function() {
                if (currentUserLocation) {
                    setMapToUserLocation(currentUserLocation);
                }
            });
		}); 
		
        // 设置地图中心为用户当前位置
        function setMapToUserLocation(location) {
            if (!map || !location || !location.latitude || !location.longitude) {
                return;
            }
            
            // 存储用户位置以供后续使用
            currentUserLocation = location;
            
            // 设置地图中心点
            var center = new TMap.LatLng(location.latitude, location.longitude);
            map.setCenter(center);
            
            // 添加当前位置标记
            new TMap.MultiMarker({
                map: map,
                styles: {
                    "current": new TMap.MarkerStyle({
                        "width": 32,
                        "height": 32,
                        "anchor": { x: 11, y: 32 },
                        "src": "./img/weizhi.png"
                    })
                },
                geometries: [{
                    "id": "current-location",
                    "styleId": "current",
                    "position": center,
                    "properties": {
                        "title": "当前位置"
                    }
                }]
            });
            
            // 添加"我在这"信息窗口
            var infoWindow = new TMap.InfoWindow({
                map: map,
                position: center,
                offset: {x: 0, y: -35},
                content: `
                    <div class="price-label" style="text-align: center;">
                        <div style="font-weight: bold;">我在这</div>
                    </div>
                `,
                enableCustom: true
            });
            
            // 显示信息窗口
            infoWindow.open();
        }
		        
	    // 初始化充电桩markets数据
	    function initMapMakers(markets, myLocation) {
	        
	        // 解析markets数据
	        try {
	            const myLocationData = typeof myLocation === 'string' ? JSON.parse(myLocation) : myLocation;
    	        // 设置用户当前位置为地图中心
    	        if (myLocationData && myLocationData.latitude && myLocationData.longitude) {
    	            setMapToUserLocation(myLocationData);
    	        }
	            
	            const marketsData = typeof markets === 'string' ? JSON.parse(markets) : markets;
	            if (map) {
	                addCustomMarkers(marketsData);
	            }
	        } catch (error) {
	            console.error('Failed to parse markets data:', error);
	        }
	    }

        // 添加自定义标点和标签
        function addCustomMarkers(markers) {
            
            var markerList = [];
            var geometries = [];

            // 处理每个标点数据
            markers.forEach(function(marker, index) {
                
                console.log(marker)
                marker.iconPath = './img/weizhi.png';
                
                // 为其他点添加标记和信息窗口
                var position = new TMap.LatLng(marker.latitude, marker.longitude);
                
                // 创建标记
                var stationMarker = new TMap.MultiMarker({
                    map: map,
                    styles: {
                        "station": new TMap.MarkerStyle({
                            "width": 30,
                            "height": 30,
                            "anchor": { x: 15, y: 30 },
                            "src": "./img/weizhi.png"
                        })
                    },
                    geometries: [{
                        "id": "marker-" + marker.id,
                        "styleId": "station",
                        "position": position,
                        "properties": {
                            "title": "站点" + marker.id
                        }
                    }]
                });
                
                // 如果有自定义信息，创建信息窗口
                if (marker.custom) {
                    // 创建标签内容
                    var price = "¥" + marker.custom.money.toFixed(2) + "/度";
                    var tagType = marker.custom.type === 1 ? "快" : "超";
                    var tagClass = marker.custom.type === 1 ? "fast-tag" : "ultra-tag";
                    var available = "可用: " + marker.custom.available + "/" + marker.custom.total;
                    
                    // 创建InfoWindow
                    var infoWindow = new TMap.InfoWindow({
                        map: map,
                        position: position,
                        offset: {x: 0, y: -35},
                        content: `
                            <div class="price-label">
                                <div class="price">${price}</div>
                                <div class="number" style="display: flex;">
                                    <div class="${tagClass}">${tagType}</div>
                                    <div class="station-info">${available}</div>
                                </div>
                            </div>
                        `,
                        enableCustom: true
                    });
                    
                    // 显示信息窗口
                    infoWindow.open();
                }
            });
        }
    </script>
</body>
</html>
